<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加用户</title>
    <link rel="stylesheet" type="text/css" href="/static/hplus/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/hplus/css/plugins/iCheck/custom.css">
    <link rel="stylesheet" type="text/css" href="/static/hplus/css/style.css">
    <link rel="stylesheet" type="text/css" href="/static/layer/skin/layer.css">
    <link rel="stylesheet" type="text/css" href="/static/uploadifive/uploadifive.css">
    <style type="text/css">
        .form-control {width: 200px;}
        .col-sm-10 {width: 250px;display: inline-block;}
        .col-sm-2 {text-align: right;width: 125px;}
        .must {color: #ff0000;font-size: 19px;float: right;margin-left: 5px;}
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal" onsubmit="return false">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">登录账号<span class="must">*</span></label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="username" name="username" autocomplete="off">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">手机号<span class="must">*</span></label>
                            <div class="col-sm-10">
                                <input type="number" class="form-control" id="mobile" name="mobile" max="13" min="13" autocomplete="off">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">昵称<span class="must">*</span></label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="nickname" name="nickname" autocomplete="off">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">登录密码<span class="must">*</span></label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="pwd1" name="pwd1" style="-webkit-text-security: disc;">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">确认密码<span class="must">*</span></label>
                            <div class="col-sm-10">
                                <input type="password" hidden="hidden" autocomplete="new-password" class="form-control" id="pwd2" name="password">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">用户角色<span class="must">*</span></label>
                            <div class="col-sm-10">
                                <select id="category" name="category" class="form-control">
                                    <option value="0">…请选择用户角色…</option>
                                    {foreach $category as $k=>$r}
                                    <option value="{$k}">{$r}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">真实姓名<span class="must">*</span></label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="name" name="name" autocomplete="off">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">身份证号<span class="must">*</span></label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="idcard" name="idcard" autocomplete="off">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">用户性别</label>
                            <div class="col-sm-10">
                                <div class="radio i-checks">
                                    <label class>
                                        <div class="iradio_square-green">
                                            <input type="radio" value="1" name="gender" style="position: absolute; opacity: 0;">
                                            <ins class="iCheck-helper"></ins>
                                        </div>
                                        男</label>
                                    <label class>
                                        <div class="iradio_square-green">
                                            <input type="radio" value="2" name="gender" style="position: absolute; opacity: 0;">
                                            <ins class="iCheck-helper"></ins>
                                        </div>
                                        女</label>
                                </div>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">用户年龄</label>
                            <div class="col-sm-10">
                                <input type="number" class="form-control" id="age" name="age" min="12" max="60" value="20" autocomplete="off">
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">用户头像</label>
                            <div class="col-sm-10">
                                <input type="file" id="file">
                                <input type="hidden" name="avatar">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="/static/hplus/js/jquery.min.js?v={php}echo time(){/php}"></script>
<script type="text/javascript" src="/static/hplus/js/plugins/iCheck/icheck.min.js?v={php}echo time(){/php}"></script>
<script type="text/javascript" src="/static/layer/layer.js?v={php}echo time(){/php}"></script>
<script type="text/javascript" src="/static/uploadifive/jquery.uploadifive.js?v={php}echo time(){/php}"></script>
<script type="text/javascript">
    $(function () {
        $(".i-checks").iCheck({checkboxClass: "icheckbox_square-green", radioClass: "iradio_square-green"});
        //$('#age').keyup(function () {
        //    let $v = parseInt($(this).val())
        //    if ($v < 12) {
        //        $(this).val(12)
        //    } else if ($v > 60) {
        //        $(this).val(60)
        //    }
        //})
        $('#file').uploadifive({
            auto: false,
            fileType: '.jpg,.jpeg,.gif,.png',
            uploadScript: '{:url("/upload/index")}',
            buttonText: '请选择文件',
            uploadLimit: 1,
            formData: {'folder': 'avatar'},
            onUploadComplete: function ($file, $data) {
                $data = JSON.parse($data)
                if ($data.code === 200) {
                    $('[name="avatar"]').val($data.data)
                    layer.msg($data.message, {icon: 1, time: 1000})
                } else {
                    layer.msg($data.message, {icon: 2, time: 1000})
                }
            }
        });
    });
</script>
</html>
